<template xmlns:el-col="http://www.w3.org/1999/html">
    <div class="nav_bg">
      <div class="center">
        <el-row>
          <el-col :span="20">
            <ul>
              <li><RouterLink to ="/user/index">商城首页</RouterLink></li>
              <li><RouterLink to ="/">商城首页</RouterLink></li>
              <li><RouterLink to ="/">商城首页</RouterLink></li>
              <li><RouterLink to ="/">商城首页</RouterLink></li>
              <li><RouterLink to ="/">商城首页</RouterLink></li>
              <li><RouterLink to ="/">商城首页</RouterLink></li>
              <li><RouterLink to ="/">商城首页</RouterLink></li>
              <li><RouterLink to ="/">商城首页</RouterLink></li>
            </ul>
          </el-col>
          <el-col :span="4">
            <ul class="user">
              <template v-if="!userStore.userInfo">
                <li><RouterLink to="/user/login">登录</RouterLink></li>
                <li><RouterLink to="/user/reg">注册</RouterLink></li>
              </template>
              <template  v-else>
                <li><router-link to="/user/center">{{userStore.userInfo.username}}</router-link></li>
                <li><el-link :underline ="false" type="primary" @click="logout">退出</el-link></li>
                <li><el-link class="cartLi" ><RouterLink to="/user/cart"> <el-icon><shopping-cart/></el-icon></RouterLink></el-link></li>
              </template>
            </ul>
          </el-col>
        </el-row>
      </div>
    </div>
  <!--头部搜索 -->
  <div class="center">
    <el-row>
      <!--分成24等分 Span的值要小于24 -->
      <el-col :span="16">
        <img src="/src/assets/images/mi.png" style= "height:90px;">
      </el-col>
      <el-col :span="8">
        <!--搜索按钮 -->
        <div class="serch">
            <el-button class="search_btn"  @click="searchKeyword()">
              <el-icon><Search /></el-icon>
            </el-button>

        <!--搜索框 -->
          <el-input type="text" class="search_input" v-model ="search" placeholder="请输入搜索内容"/>
        </div>
      </el-col>
    </el-row>
  </div>
  <!--上架的第一级分类 -->
  <div class="center">
    <ul class="category">
      <li v-for="(category,index) in parentList" :key="index" ><RouterLink :to="`/user/search/${category.id}`">{{category.name}}</RouterLink></li>
<!--      <li><RouterLink to="/user/search">手机</RouterLink></li>-->
    </ul>
  </div>
</template>

<script setup>
//1.获取父分类 2.上架
import { ref } from "vue";
import categoryApi from "@/api/CategoryApi.js";
import {useUserStore} from "@/stores/user.js";
import {useTokenStore} from "@/stores/token.js";
import {useRouter} from "vue-router";
import {ShoppingCart} from "@element-plus/icons-vue";
const router = useRouter();
const tokenStore = useTokenStore();
const userStore = useUserStore();
const parentList = ref([]);
const search = ref('');
function searchKeyword(){
  //跳转到搜索页面,
  router.push(`/user/search/0/${search.value}`);
  search.value = '';
}
function getParent(){
  const condition = {
    parentId: 0,
    status: 1
  };
  categoryApi.selectByPage(condition)
  .then(resp => {
    parentList.value = resp.data;


  })
}
getParent();
//注销
function logout(){
  //清空token
  tokenStore.$reset();
  //清空信息
  userStore.$reset();
  //跳转
  router.push("/user/index");

}
</script>

<style scoped>
    .cartLi.el-icon{
      top : 5px;
    }
    .nav_bg {
      background-color: var(--theme--bg--color);
      line-height: 40px;
    }
    ul li {
      float: left;
      margin-right: 20px;
    }
    .user li{
      float: right;
    }
    a {
      color: #999;

    }
    a:hover{
      color: #fff;
    }
    .serch{
      padding-top: 10px;
    }
    .search_input{
      width: 260px;
      float: right;
    }
    .search_btn{
      float: right;
      color: #FFF;
      margin-left: 5px;
      border-radius:0px ;
      border: 0px;
      background-color: var(--theme-color);

    }
    .search_btn:hover{
      background-color: wheat;
    }
    .category{
      background-color: var(--theme-color);
      line-height: 30px;

    }
    .category li{
      float: left;
      padding:0 10px;
    }
    .category li a{
      color: #fff;
      font-weight: bold;
    }
    .category li:hover{
      background-color: wheat;
    }


</style>